<!DOCTYPE html>
<html>
<head>
	<title>vue</title>
	<meta charset="UTF-8">
	<script src="./vue.js"></script>
	<style>
		 .red {
			 color: red;
		 }
		 .green {
			 color: green;
		 }
		 .active {
			 background-color: pink;
		 }
	</style>
</head>
<body>
	<div id="app">
<!--		<div :class="[flag ? 'red' : 'green']" @click="flag = !flag">{{message}}</div>-->
		<div :class="{active: isActivated}" @click="handleDivClick">{{message}}</div>
	</div>

	<script>
		var app = new Vue({
			el: '#app',
			data: {
				message: 'dsadsad',
				flag: true,
				isActivated: false
			},
			methods: {
				handleDivClick: function () {
					this.isActivated = !this.isActivated
				}
			}
		})
	</script>
</body>
</html>